<template>
  <!-- // 地图 -->
  <div class="homePageCards">
    <div class="grollDiv">
      <div class="flex flex-warp">
        <label class="checklist iCheck" v-for="(item, index) in resourceTypes" :key="index">
          <input class="checkbox" type="checkbox" v-model="item.value" @change="check(item)" />
          <span class="fontSize18 fontWeight">{{ item.name }}</span>
        </label>
      </div>
    </div>
    <div class="full-box">
      <img src="../../../../assets/img/full.png" alt="">
      <span @click="fullscreen" class="quanping">全屏</span>
    </div>
    <div class="legend_right">
      <!-- <div class="top">
        <span>变电站</span>
        <span>线路</span>
      </div> -->
      <div class="top">
        <span style="display: flex;"><img src="../../../../assets/map/circle.jpg" height="22px" width="22px" alt="" />
          <div style="margin-left:6px;">变电站</div>
        </span>
        <span style="display: flex;align-items: center;margin-bottom: 6px;">
          <div style="width: 26px;height:6px;background: #000;"></div>
          <div style="margin-left:6px;">线路</div>
        </span>
      </div>
      <div class="bottom_unit">
        <div>
          <span class="yanse" style="background: #0000FF;"></span>
          <span>1000kV</span>
        </div>
        <div>
          <span class="yanse" style="background: #FA0000;"></span>
          <span>500kV</span>
        </div>
      </div>
      <div class="bottom_unit">
        <div>
          <span class="yanse" style="background: #800080;"></span>
          <span>220kV</span>
        </div>
        <div>
          <span class="yanse" style="background: #F04141;"></span>
          <span>110kV</span>
        </div>
      </div>
      <div class="bottom_unit">
        <div>
          <span class="yanse" style="background: #FFFF00;"></span>
          <span>35kV</span>
        </div>
        <div>
          <span class="yanse" style="background: #E2AC06;"></span>
          <span>20kV</span>
        </div>
      </div>
      <div class="bottom_unit">
        <div>
          <span class="yanse" style="background: #00D200;"></span>
          <span>10kV</span>
        </div>
        <div>
          <span class="yanse" style="background: #00008B;"></span>
          <span>6kV</span>
        </div>
      </div>
      <div class="bottom_unit">
        <div>
          <span class="yanse" style="background: #D2B48C;"></span>
          <span>0.4kV</span>
        </div>
        <div>
          <span class="yanse" style="background: #AAAAAA;"></span>
          <span>设备失电</span>
        </div>
      </div>
    </div>
    <div id="map" style="width: 100%; height: 100%"></div>
  </div>
</template>
<script>
import sjccKey from "../../../../config/sjmapkey";
export default {
  name: "MapContent",
  components: {},
  data: function () {
    return {
      map: null,
      geo: null,
      geocodingTask: null,
      resourceTypes: [
        {
          name: "变电站",
          value: true
        },
        {
          name: "输电线路",
          value: false
        },
        {
          name: "配电线路",
          value: false
        },
        {
          name: "台区",
          value: false
        }
      ],
      popupInfoWindow: null,
      warehouseList: [
        {
          id: "1xx",
          longitude: 113.29483316315874,
          latitude: 31.87961581398725,
          name: "35kV何店变勘察任务",
          time: "2021-08-12 16:53:00",
          unit: "国网随州供电公司",
          dep: "",
          huifuTime: ""
        },
        {
          id: "2xx",
          longitude: 113.43975529120443,
          latitude: 31.991373255426004,
          name: "35kV何店变勘察任务",
          time: "2021-08-12 16:53:00",
          unit: "国网随州供电公司",
          dep: "",
          huifuTime: ""
        }
        // {
        //   id: 3,
        //   coordinate: {
        //     longitude: "",
        //     latitude: ""
        //   },
        //   name: "YJXD20210812随州3#装备仓库值守",
        //   type: "特岗巡护",
        //   dep: "设备部",
        //   user: "刘俊浩"
        // },
        // {
        //   id: 4,
        //   coordinate: {
        //     longitude: "",
        //     latitude: ""
        //   },
        //   name: "YJXD20210812随州3#装备仓库值守",
        //   type: "特岗巡护",
        //   dep: "设备部",
        //   user: "刘俊浩"
        // },
        // {
        //   id: 5,
        //   coordinate: {
        //     longitude: "",
        //     latitude: ""
        //   },
        //   name: "YJXD20210812随州3#装备仓库值守",
        //   type: "特岗巡护",
        //   dep: "设备部",
        //   user: "刘俊浩"
        // },
        // {
        //   id: 6,
        //   coordinate: {
        //     longitude: "",
        //     latitude: ""
        //   },
        //   name: "YJXD20210812随州3#装备仓库值守",
        //   type: "特岗巡护",
        //   dep: "设备部",
        //   user: "刘俊浩"
        // }
      ]
    };
  },
  mounted() {
    this.init();
    window.handleSee = this.handleSee;
  },
  computed: {
    typeNames() {
      return this.resourceTypes.filter((i) => i.value === true);
    }
  },
  methods: {
    check(val) {
      this.resourceTypes.forEach((element) => {
        if (element.name !== val.name) {
          element.value = false;
        }
      });
      const param = this.typeNames;
      this.$emit("typeNames", param);
    },
    fullscreen() { // 进入全屏
      var docElm = document.getElementById("map");// 指定容器id
      if (!this.FullScreen) {
        // 兼容W3C
        if (docElm.requestFullscreen) {
          docElm.requestFullscreen();
        } else if (docElm.mozRequestFullScreen) { // 兼容FireFox
          docElm.mozRequestFullScreen();
        } else if (docElm.webkitRequestFullScreen) { // 兼容Chrome等
          docElm.webkitRequestFullScreen();
        } else if (docElm.msRequestFullscreen) { // 兼容IE11
          docElm.msRequestFullscreen();
        }
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
        this.FullScreen = !this.FullScreen;
      }
    },
    init() {
      epgis.tokenTask.login(sjccKey.appkey, sjccKey.appsecret).then(res => { this.initMap(); });
    },
    loadPlugin() {
      SGMap.plugin("SGMap.GeolocationTask").then((res) => {
        this.initMap();
      });
    },
    // 申请的key和sn
    // initMap () {
    //   const map = new SGMap.Map({
    //     // 地图绑定的DOM元素ID
    //     container: "map",
    //     // 地图样式
    //     style: "aegis://styles/aegis/Streets",
    //     // 默认缩放层级
    //     zoom: 9,
    //     // 地图中心点
    //     // center: [114.36730140947924, 30.574022147218216],
    //     center: [113.37377, 31.717497], // 随州经纬度
    //     // 地图默认字体
    //     localIdeographFontFamily: "Microsoft YoHei",
    //     transition: {
    //       duration: 300,
    //       delay: 0
    //     },
    //     renderWorldCopies: false
    //   });
    //   map.on("load", function (e) {
    //     window.top.postMessage("map_load_success", "*");
    //     // 先建立好画选中点的图层，然后之后再设置位置和移除
    //     map.loadImage(
    //       "https://map.sgcc.com.cn/products/js-sdk/v3/assets/images/markers_new2_4ab0bc5_78.png",
    //       function (error, image) {
    //         if (error) throw error;
    //         map.addImage("poi", image);
    //         map.addLayer({
    //           id: "choicePoi",
    //           type: "symbol",
    //           source: {
    //             type: "geojson",
    //             data: {
    //               type: "FeatureCollection",
    //               features: []
    //             }
    //           },
    //           layout: {
    //             "icon-image": "poi",
    //             "icon-size": 1,
    //             "icon-anchor": "bottom",
    //             // "icon-offset":[0,0],
    //             "icon-ignore-placement": true
    //           }
    //         });
    //       }
    //     );
    //     // 自动定位
    //     // new SGMap.GeolocationTask().getLocation().then(function (data) {
    //     //   console.log("LBSactive", data[0])
    //     //   map.getSource("choicePoi").setData({
    //     //     type: "FeatureCollection",
    //     //     features: [{
    //     //       type: "Feature",
    //     //       geometry: {
    //     //         type: "Point",
    //     //         coordinates: data[0]
    //     //       }
    //     //     }]
    //     //   })
    //     //   map.easeTo({
    //     //     center: data[0],
    //     //     zoom: 9
    //     //   })
    //     // }).catch(function (e) {
    //     //   console.log(e)
    //     // })
    //   });
    //   map.addControl(
    //     new SGMap.ScaleControl({
    //       maxWidth: 80,
    //       unit: "metric"
    //     }),
    //     "bottom-left"
    //   );
    //   map.on("click", function (e) {
    //     console.log(e.lngLat);
    //     if (e.lngLat) {
    //       map.getSource("choicePoi").setData({
    //         type: "FeatureCollection",
    //         features: [
    //           {
    //             type: "Feature",
    //             geometry: {
    //               type: "Point",
    //               coordinates: [e.lngLat.lng, e.lngLat.lat]
    //             }
    //           }
    //         ]
    //       });
    //       map.easeTo({
    //         center: [e.lngLat.lng, e.lngLat.lat],
    //         zoom: 15
    //       });
    //     }
    //   });
    // }
    initMap1() {
      const self = this;
      self.map = new epgis.Map({
        // 地图绑定的DOM元素ID
        container: "map",
        // 地图样式
        style: "aegis://styles/aegis/Streets",
        // 默认缩放层级
        zoom: 7.9,
        // 地图中心点
        // center: [114.36730140947924, 30.574022147218216],
        // 随县
        center: [113.29483316315878, 31.87961581398723],
        // 随州
        // center: [113.37377, 31.717497],
        // 地图默认字体
        localIdeographFontFamily: "Microsoft YoHei"
        // renderWorldCopies: false
      });
      self.map.on("load", function (e) {
        // window.top.postMessage("map_load_success", "*");

        var districtTask = new epgis.DistrictTask();
        // 行政区划名称查询行政区划;
        districtTask
          .searchDistrict({
            keyword: "随县",
            // 建议直辖市取2，其他省份取1，提升请求速度
            subdistrict: 2,
            extension: true,
            isEncode: false
          })
          .then((result) => {
            let features = [];
            const featuresSymbol = [];
            let featuresPolygon = [];
            // 外层遮罩方形边界
            let outSideShape = [
              [
                [109.08605140490641, 46.53186534100985],
                [123.33266999835769, 46.53186534100985],
                [123.33266999835769, 20.931139019287684],
                [109.08605140490641, 20.931139019287684],
                [109.08605140490641, 46.53186534100985]
              ]
            ];
            // 主要区分直辖市和其他省份;
            const district =
              result.districts[0].sub_districts.length == 1
                ? result.districts[0].sub_districts[0]
                : result.districts[0];
            for (var o in district.sub_districts) {
              const shape = district.sub_districts[o].shape;
              // const shapeMultiPolygon = [];

              // 标注
              featuresSymbol.push({
                type: "Feature",
                geometry: {
                  coordinates: district.sub_districts[o].center,
                  type: "Point"
                },
                properties: {
                  name: district.sub_districts[o].name
                }
              });
              // 边界
              if (shape.type == "MultiPolygon") {
                for (const o in shape.coordinates) {
                  features = features.concat(shape.coordinates[o]);
                }
              } else {
                features.push(shape.coordinates[0]);
              }
            }
            if (district.shape.type == "MultiPolygon") {
              for (const o in district.shape.coordinates) {
                outSideShape = outSideShape.concat(district.shape.coordinates[o]);
                featuresPolygon = featuresPolygon.concat(district.shape.coordinates[o]);
              }
            } else {
              outSideShape = outSideShape.concat(district.shape.coordinates);
              featuresPolygon = featuresPolygon.concat(district.shape.coordinates);
            }
            // 行政区画面;
            self.map.addLayer({
              id: "power-polygon",
              type: "fill",
              source: {
                type: "geojson",
                data: {
                  type: "FeatureCollection",
                  features: [
                    {
                      type: "Feature",
                      geometry: {
                        type: "Polygon",
                        coordinates: featuresPolygon
                      }
                    }
                  ]
                }
              },
              paint: {
                "fill-color": "#dae4fa",
                "fill-opacity": 0.6,
                "fill-outline-color": "#597BF9" // 图层边框线
              }
            });
            // 行政区划边界线
            self.map.addLayer({
              id: "power-line",
              type: "line",
              source: {
                type: "geojson",
                data: {
                  type: "FeatureCollection",
                  features: [
                    {
                      type: "Feature",
                      geometry: {
                        type: "MultiLineString",
                        coordinates: features
                      }
                    }
                  ]
                }
              },
              paint: {
                "line-color": "#41acb1",
                "line-width": 2
              }
            });
            // 绑定仓库弹窗
            self.popupInfoWindow = new epgis.Popup({
              closeButton: false,
              closeOnClick: false,
              anchor: "top-left",
              offset: [10, 10]
            });
            // 画点
            self.warehouseList.forEach((item) => {
              // let url = require("@/assets/img/fangzi.png");
              var url = require("../../../../assets/img/yuanquan.jpg");
              self.map.loadImage(url, (error, image) => {
                console.log(item.id + "poi", "??????item.id");
                self.map.addImage(item.id + "poi", image);
                console.log(self.map.hasImage(item.id + "poi"), "??self.map.hasImage(item.id);");
                self.map.addLayer({
                  id: item.id,
                  type: "symbol",
                  source: {
                    type: "geojson",
                    data: {
                      type: "FeatureCollection",
                      features: [
                        {
                          type: "Feature",
                          geometry: {
                            type: "Point",
                            coordinates: [item.longitude, item.latitude]
                          },
                          properties: {
                            name: "111"
                          }
                        }
                      ]
                    }
                  },
                  layout: {
                    "icon-image": item.id + "poi",
                    "icon-size": 0.8, // 圆圈大小
                    "icon-ignore-placement": true,
                    "text-ignore-placement": false,
                    "text-size": 12,
                    "text-anchor": "top",
                    "text-allow-overlap": false,
                    "icon-anchor": "center",
                    "text-offset": [0, 0],
                    "text-max-width": 8,
                    "text-font": ["Microsoft YaHei Regular"]
                  },
                  paint: {
                    "text-color": "#555252",
                    "text-halo-color": "#FFFFFF",
                    "text-halo-width": 1.33333
                  }
                });
              });
              // 画线
              new epgis.DrawPolylineHandler({
                map: self.map,
                enableEdit: true,
                featuresList: [
                  {
                    type: "Feature",
                    geometry: {
                      type: "LineString",
                      coordinates: [
                        [114.36730140947924, 30.574022147218216],
                        [112.8188, 31.6279408489024],
                        [113.10645, 31.69997]
                      ]
                    },
                    properties: {
                      id: "drawPolylineId_1555313398764"
                    }
                  }]
              });
              // 监听鼠标进入事件
              self.map.on("mouseenter", item.id, function (e) {
                console.log(e);
                self.popupInfoWindow.setLngLat(e.features[0].geometry.coordinates)
                  .setHTML(
                    `<div style="width:274px;height:160px;display:flex;flex-direction:column;padding:5px">
                    <div style="width:100%;height:25px;display:flex;align-items:center;justify-content:space-between;border-bottom: 1px solid #D7D7D7;">
                      <div style="flex:1;display:flex;align-items:center;">
                        <img src="@/assets/img/ckDetail.png" style="width:25px;height:25px;margin-right:10px" />
                        <p style="font-size:15px;color:#333333;font-weight:700">基本信息</p>
                      </div>
                      <div style="width:56px;color:#3561fd;text-decoration:underline;cursor: pointer;" onclick="handleSee(1)">详情</div>
                    </div>
                    <div style="width:100%;display:flex;flex-direction:column;margin-top:12px">
                      <div style="width:100%;margin-bottom:5px;font-size:15px;color:#666666;display:flex"><p style="width:110px;text-align:right">线路名称：</p><p style="flex:1">${item.name}</p></div>
                      <div style="width:100%;margin-bottom:5px;font-size:15px;color:#666666;display:flex"><p style="width:110px;text-align:right">所属地市：</p><p style="flex:1">${item.unit}</p></div>
                      <div style="width:100%;margin-bottom:5px;font-size:15px;color:#666666;display:flex"><p style="width:110px;text-align:right">位置：</p><p style="flex:1">${item.dep}</p></div>
                      <div style="width:100%;margin-bottom:5px;font-size:15px;color:#666666;display:flex"><p style="width:110px;text-align:right">跳闸时间：</p><p style="flex:1">${item.time}</p></div>
                      <div style="width:100%;margin-bottom:5px;font-size:15px;color:#666666;display:flex"><p style="width:110px;text-align:right">恢复时间：</p><p style="flex:1">${item.huifuTime}</p></div>
                    </div>
                  </div>`
                  )
                  .addTo(self.map);
              });

              // 监听鼠标移出事件
              // self.map.on("mouseleave", item.id, function (e) {
              //   self.popupInfoWindow.remove();
              // });
            });

          });
      });
      // self.map.addControl(
      //   new SGMap.ScaleControl({
      //     maxWidth: 80,
      //     unit: "metric"
      //   }),
      //   "bottom-left"
      // );
      self.map.on("click", function (e) {
        self.popupInfoWindow.remove();
        console.log(123);
      });
    },
    initMap() {
      const self = this;
      self.map = new epgis.Map({
        // 地图绑定的DOM元素ID
        container: "map",
        // 地图样式
        style: "aegis://styles/aegis/Streets",
        // 默认缩放层级
        zoom: 7.9,
        // 地图中心点
        center: [113.29483316315878, 31.87961581398723], // 随县
        // 地图默认字体
        localIdeographFontFamily: "Microsoft YoHei"
        // renderWorldCopies: false
      });
      self.map.on("load", function (e) {
        // eslint-disable-next-line no-undef
        var districtTask = new epgis.DistrictTask();
        // 行政区划名称查询行政区划;
        districtTask.searchDistrict({
          keyword: "随县",
          // 建议直辖市取2，其他省份取1，提升请求速度
          subdistrict: 1,
          extension: true,
          isEncode: false
        }).then((result) => {
          let features = [];
          const featuresSymbol = [];
          let featuresPolygon = [];
          // 主要区分直辖市和其他省份;
          const district =
            result.districts[0].sub_districts.length == 1
              ? result.districts[0].sub_districts[0]
              : result.districts[0];
          const shape = district.shape;
          if (shape.type == "MultiPolygon") {
            // eslint-disable-next-line no-redeclare
            for (const o in shape.coordinates) {
              features = features.concat(shape.coordinates[o]);
            }
          } else {
            features.push(shape.coordinates[0]);
          }
          for (const o in district.sub_districts) {
            // 标注
            featuresSymbol.push({
              type: "Feature",
              geometry: {
                coordinates: district.sub_districts[o].center,
                type: "Point"
              },
              properties: {
                name: district.sub_districts[o].name
              }
            });
          }
          if (district.shape.type == "MultiPolygon") {
            // eslint-disable-next-line no-redeclare
            for (var o in district.shape.coordinates) {
              featuresPolygon = featuresPolygon.concat(district.shape.coordinates[o]);
            }
          } else {
            featuresPolygon = featuresPolygon.concat(district.shape.coordinates);
          }
          // 行政区画面;
          self.map.addLayer({
            id: "power-polygon",
            type: "fill",
            source: {
              type: "geojson",
              data: {
                type: "FeatureCollection",
                features: [
                  {
                    type: "Feature",
                    geometry: {
                      type: "Polygon",
                      coordinates: featuresPolygon
                    }
                  }
                ]
              }
            },
            paint: {
              "fill-color": "#dae4fa",
              "fill-opacity": 0.7
            }
          });
          // 行政区划边界线
          self.map.addLayer({
            id: "power-polygon-lines",
            type: "line",
            source: {
              type: "geojson",
              data: {
                type: "FeatureCollection",
                features: [
                  {
                    type: "Feature",
                    geometry: {
                      type: "MultiLineString",
                      coordinates: features
                    }
                  }
                ]
              }
            },
            paint: {
              "line-color": "#0864FC",
              "line-width": 2,
              "line-dasharray": [1, 1] // 控制虚线的疏密
            }
          });
          // 绑定仓库弹窗
          self.popupInfoWindow = new epgis.Popup({
            closeButton: false,
            closeOnClick: false,
            anchor: "top-right",
            offset: [5, 10]
          });
          // 画点
          //   self.mapData.forEach((item) => {
          //     // let url = require("@/assets/img/fangzi.png");
          //     var url = null;
          //     if (item.warningLvCode == 4) {
          //       url = require("../../../../assets/map/red.png");
          //     } else if (item.warningLvCode == 3) {
          //       url = require("../../../../assets/map/orange.png");
          //     } else if (item.warningLvCode == 2) {
          //       url = require("../../../../assets/map/yellow.png");
          //     } else if (item.warningLvCode == 1) {
          //       url = require("../../../../assets/map/blue.png");
          //     }
          //     self.map.loadImage(url, (error, image) => {
          //       self.map.addImage(item.id + "poi", image);
          //       self.map.addLayer({
          //         id: item.id,
          //         type: "symbol",
          //         source: {
          //           type: "geojson",
          //           data: {
          //             type: "FeatureCollection",
          //             features: [
          //               {
          //                 type: "Feature",
          //                 geometry: {
          //                   type: "Point",
          //                   coordinates: [Number(item.geo.split(",")[0]), Number(item.geo.split(",")[1])]
          //                 },
          //                 properties: {
          //                   name: "111"
          //                 }
          //               }
          //             ]
          //           }
          //         },
          //         layout: {
          //           "icon-image": item.id + "poi",
          //           "icon-size": 0.3,
          //           "icon-ignore-placement": true,
          //           "text-ignore-placement": false,
          //           "text-size": 12,
          //           "text-anchor": "top",
          //           "text-allow-overlap": false,
          //           "icon-anchor": "center",
          //           "text-offset": [0, 0],
          //           "text-max-width": 8,
          //           "text-font": ["Microsoft YaHei Regular"]
          //         },
          //         paint: {
          //           "text-color": "#fff",
          //           "text-halo-color": "#555252",
          //           "text-halo-width": 3
          //         }
          //       });
          //     });
          //     // 监听鼠标进入事件
          //     self.map.on("mouseenter", item.id, function (e) {
          //       self.popupInfoWindow.setLngLat(e.features[0].geometry.coordinates)
          //         .setHTML(
          //           `<div style="width:370px;height:130px;display:flex;flex-direction:column;padding:5px">
          //             <div style="width:100%;height:25px;line-height:25px;text-align:center;">
          //               <div style="font-size:17px;color:#fff;font-weight:700;">${item.warningInfo}</div>
          //             </div>
          //             <div style="width:100%;display:flex;flex-direction:column;margin-top:20px">
          //               <div style="width:100%;margin-bottom:8px;font-size:15px;color:#fff;display:flex;justify-content:space-between;">
          //                 <div style="width:50%;">预警级别：${item.warningLvName}</div>
          //                 <div style="width:50%;text-align:right">险情类别：${item.dangerName}</div>
          //               </div>
          //               <div style="width:100%;margin-bottom:8px;font-size:15px;color:#fff;display:flex"><p style="width:75px;">影响范围：</p><p style="flex:1">${item.effectRange}</p></div>
          //               <div style="width:100%;margin-bottom:8px;font-size:15px;color:#fff;display:flex"><p style="width:75px;">影响时间：</p><p style="flex:1">${item.effectEndTime}至${item.effectStartTime}</p></div>
          //             </div>
          //           </div>
          //           `
          //         )
          //         .addTo(self.map);
          //     });
          //     // 监听鼠标移出事件
          //     self.map.on("mouseleave", item.id, function (e) {
          //       self.popupInfoWindow.remove();
          //     });
          //   });

          // });
          self.warehouseList.forEach((item) => {
            // let url = require("@/assets/img/fangzi.png");
            var url = require("../../../../assets/img/yuanquan.jpg");
            self.map.loadImage(url, (error, image) => {
              console.log(item.id + "poi", "??????item.id");
              self.map.addImage(item.id + "poi", image);
              console.log(self.map.hasImage(item.id + "poi"), "??self.map.hasImage(item.id);");
              self.map.addLayer({
                id: item.id,
                type: "symbol",
                source: {
                  type: "geojson",
                  data: {
                    type: "FeatureCollection",
                    features: [
                      {
                        type: "Feature",
                        geometry: {
                          type: "Point",
                          coordinates: [item.longitude, item.latitude]
                        },
                        properties: {
                          name: "111"
                        }
                      }
                    ]
                  }
                },
                layout: {
                  "icon-image": item.id + "poi",
                  "icon-size": 0.8, // 圆圈大小
                  "icon-ignore-placement": true,
                  "text-ignore-placement": false,
                  "text-size": 12,
                  "text-anchor": "top",
                  "text-allow-overlap": false,
                  "icon-anchor": "center",
                  "text-offset": [0, 0],
                  "text-max-width": 8,
                  "text-font": ["Microsoft YaHei Regular"]
                },
                paint: {
                  "text-color": "#555252",
                  "text-halo-color": "#FFFFFF",
                  "text-halo-width": 1.33333
                }
              });
            });
            // 画线
            new epgis.DrawPolylineHandler({
              map: self.map,
              enableEdit: true,
              featuresList: [
                {
                  type: "Feature",
                  geometry: {
                    type: "LineString",
                    coordinates: [
                      [114.36730140947924, 30.574022147218216],
                      [112.8188, 31.6279408489024],
                      [113.10645, 31.69997]
                    ]
                  },
                  properties: {
                    id: "drawPolylineId_1555313398764"
                  }
                }]
            });
            // 监听鼠标进入事件
            self.map.on("mouseenter", item.id, function (e) {
              console.log(e);
              self.popupInfoWindow.setLngLat(e.features[0].geometry.coordinates)
                .setHTML(
                  `<div style="width:274px;height:160px;display:flex;flex-direction:column;padding:5px">
                    <div style="width:100%;height:25px;display:flex;align-items:center;justify-content:space-between;border-bottom: 1px solid #D7D7D7;">
                      <div style="flex:1;display:flex;align-items:center;">
                        <img src="@/assets/img/ckDetail.png" style="width:25px;height:25px;margin-right:10px" />
                        <p style="font-size:15px;color:#333333;font-weight:700">基本信息</p>
                      </div>
                      <div style="width:56px;color:#3561fd;text-decoration:underline;cursor: pointer;" onclick="handleSee(1)">详情</div>
                    </div>
                    <div style="width:100%;display:flex;flex-direction:column;margin-top:12px">
                      <div style="width:100%;margin-bottom:5px;font-size:15px;color:#666666;display:flex"><p style="width:110px;text-align:right">线路名称：</p><p style="flex:1">${item.name}</p></div>
                      <div style="width:100%;margin-bottom:5px;font-size:15px;color:#666666;display:flex"><p style="width:110px;text-align:right">所属地市：</p><p style="flex:1">${item.unit}</p></div>
                      <div style="width:100%;margin-bottom:5px;font-size:15px;color:#666666;display:flex"><p style="width:110px;text-align:right">位置：</p><p style="flex:1">${item.dep}</p></div>
                      <div style="width:100%;margin-bottom:5px;font-size:15px;color:#666666;display:flex"><p style="width:110px;text-align:right">跳闸时间：</p><p style="flex:1">${item.time}</p></div>
                      <div style="width:100%;margin-bottom:5px;font-size:15px;color:#666666;display:flex"><p style="width:110px;text-align:right">恢复时间：</p><p style="flex:1">${item.huifuTime}</p></div>
                    </div>
                  </div>`
                )
                .addTo(self.map);
            });

            // 监听鼠标移出事件
            // self.map.on("mouseleave", item.id, function (e) {
            //   self.popupInfoWindow.remove();
            // });
          });

        });
      });
      // self.map.addControl(
      //   new SGMap.ScaleControl({
      //     maxWidth: 80,
      //     unit: "metric"
      //   }),
      //   "bottom-left"
      // );
      // self.map.on("click", function (e) {
      //   self.popupInfoWindow.remove();
      //   console.log(123);
      // });
    }
  }
};
</script>

<style scoped lang="less">
.homePageCards {
  position: relative;
  width: 100%;
  // height: 54vh;
  height: 100%;
  box-sizing: border-box;
  padding: 6px;
  border-radius: 5px;
  #map {
    border-radius: 5px;
  }
}
.quanping {
  cursor: pointer;
}
.grollDiv {
  width: 30%;
  height: 16%;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.8);
  top: 10px;
  left: 10px;
  z-index: 9;
  color: #fff;
  font-size: 12px;
  line-height: 25px;
  .flex-warp {
    flex-wrap: wrap;
  }
  .checklist {
    width: 50%;
    margin-top: 8px;
    box-sizing: border-box;
    // text-align: center;
    input {
      width: 40%;
      height: 70%;
    }
    span {
      color: #000;
    }
  }
}
.full-box {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
  z-index: 9;
  background-color: #fff;
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 5px;

  img {
    width: 15px;
    height: 15px;
    margin-right: 5px;
  }
}
.legend_right {
  width: 200px;
  height: 210px;
  background: #fff;
  position: absolute;
  bottom: 15px;
  right: 15px;
  // display: flex;
  // align-items: center;
  font-size: 18px;
  font-weight: 700;
  z-index: 9;
  border-radius: 5px;
  .top {
    height: 30px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    display: flex;
    justify-content: space-between;
    margin: 10px;
    border-bottom: 1px solid #d7d7d7;
  }
  .bottom_unit {
    display: flex;
    // justify-content: space-between;
    margin: 10px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    div {
      flex: 1;
      display: flex;
      align-items: center;
      span {
        text-align: center;
      }
      .yanse {
        display: inline-block;
        width: 18px;
        height: 18px;
        line-height: 18px;
        text-align: center;
        border-radius: 4px;
        margin-right: 4px;
      }
    }
  }
}
:deep(.epgis-popup) {
  max-width: 600px !important;
}
</style>
